import React, { useMemo } from 'react'
import * as THREE from 'three'

// 植物装饰组件
const Plant: React.FC<{ position: [number, number, number]; scale?: number }> = ({ position, scale = 1 }) => {
  return (
    <group position={position} scale={[scale, scale, scale]}>
      {/* 花盆 */}
      <mesh position={[0, 0.1, 0]}>
        <cylinderGeometry args={[0.3, 0.4, 0.2, 8]} />
        <meshStandardMaterial color="#8B4513" roughness={0.8} />
      </mesh>
      
      {/* 植物主体 */}
      <mesh position={[0, 0.4, 0]}>
        <coneGeometry args={[0.25, 0.8, 6]} />
        <meshStandardMaterial color="#228B22" roughness={0.9} />
      </mesh>
      
      {/* 植物叶子 */}
      {Array.from({ length: 4 }).map((_, i) => (
        <mesh key={i} position={[0, 0.6, 0]} rotation={[0, (i * Math.PI) / 2, 0]}>
          <sphereGeometry args={[0.15, 8, 6]} />
          <meshStandardMaterial color="#32CD32" roughness={0.9} />
        </mesh>
      ))}
    </group>
  )
}

// 花装饰组件
const Flower: React.FC<{ position: [number, number, number]; color?: string; scale?: number }> = ({ 
  position, 
  color = '#FF69B4', 
  scale = 1 
}) => {
  return (
    <group position={position} scale={[scale, scale, scale]}>
      {/* 花茎 */}
      <mesh position={[0, 0.1, 0]}>
        <cylinderGeometry args={[0.02, 0.02, 0.3, 8]} />
        <meshStandardMaterial color="#228B22" />
      </mesh>
      
      {/* 花朵 */}
      <mesh position={[0, 0.25, 0]}>
        <sphereGeometry args={[0.08, 8, 6]} />
        <meshStandardMaterial color={color} />
      </mesh>
      
      {/* 花瓣 */}
      {Array.from({ length: 5 }).map((_, i) => (
        <mesh key={i} position={[0, 0.25, 0]} rotation={[0, (i * Math.PI * 2) / 5, 0]}>
          <sphereGeometry args={[0.06, 6, 4]} />
          <meshStandardMaterial color={color} />
        </mesh>
      ))}
      
      {/* 叶子 */}
      {Array.from({ length: 3 }).map((_, i) => (
        <mesh key={i} position={[0, 0.1 + i * 0.1, 0]} rotation={[0, (i * Math.PI * 2) / 3, 0]}>
          <sphereGeometry args={[0.03, 4, 3]} />
          <meshStandardMaterial color="#32CD32" />
        </mesh>
      ))}
    </group>
  )
}

// 花束装饰组件
const FlowerBouquet: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  const flowerColors = ['#FF69B4', '#FFB6C1', '#FFA07A', '#DDA0DD', '#98FB98', '#F0E68C']
  
  return (
    <group position={position}>
      {/* 花瓶 */}
      <mesh position={[0, 0.15, 0]}>
        <cylinderGeometry args={[0.2, 0.25, 0.3, 8]} />
        <meshStandardMaterial color="#2F4F4F" metalness={0.8} roughness={0.2} />
      </mesh>
      
      {/* 花朵 */}
      {Array.from({ length: 8 }).map((_, i) => (
        <Flower 
          key={i} 
          position={[
            Math.cos(i * Math.PI / 4) * 0.1, 
            0.3 + Math.random() * 0.2, 
            Math.sin(i * Math.PI / 4) * 0.1
          ]} 
          color={flowerColors[i % flowerColors.length]}
          scale={0.8 + Math.random() * 0.4}
        />
      ))}
    </group>
  )
}

// 雕塑装饰组件
const Sculpture: React.FC<{ position: [number, number, number]; type?: 'abstract' | 'classical' }> = ({ 
  position, 
  type = 'classical' 
}) => {
  if (type === 'abstract') {
    return (
      <group position={position}>
        {/* 抽象雕塑 */}
        <mesh position={[0, 0.5, 0]}>
          <octahedronGeometry args={[0.4]} />
          <meshStandardMaterial color="#C0C0C0" metalness={0.8} roughness={0.2} />
        </mesh>
        <mesh position={[0, 0.2, 0]}>
          <cylinderGeometry args={[0.1, 0.1, 0.4, 8]} />
          <meshStandardMaterial color="#A0A0A0" metalness={0.7} roughness={0.3} />
        </mesh>
      </group>
    )
  }

  return (
    <group position={position}>
      {/* 古典雕塑底座 */}
      <mesh position={[0, 0.1, 0]}>
        <cylinderGeometry args={[0.3, 0.4, 0.2, 8]} />
        <meshStandardMaterial color="#D2B48C" roughness={0.6} />
      </mesh>
      
      {/* 雕塑主体 */}
      <mesh position={[0, 0.4, 0]}>
        <sphereGeometry args={[0.2, 16, 16]} />
        <meshStandardMaterial color="#F5F5DC" roughness={0.4} />
      </mesh>
      
      {/* 装饰环 */}
      <mesh position={[0, 0.4, 0]} rotation={[Math.PI / 2, 0, 0]}>
        <torusGeometry args={[0.25, 0.05, 8, 16]} />
        <meshStandardMaterial color="#DAA520" metalness={0.8} roughness={0.2} />
      </mesh>
    </group>
  )
}

// 装饰画框组件
const DecorativeFrame: React.FC<{ 
  position: [number, number, number]; 
  rotation?: [number, number, number];
  size?: [number, number];
}> = ({ position, rotation = [0, 0, 0], size = [1, 1.2] }) => {
  return (
    <group position={position} rotation={rotation}>
      {/* 画框 */}
      <mesh>
        <planeGeometry args={[size[0] + 0.1, size[1] + 0.1]} />
        <meshStandardMaterial color="#8B4513" />
      </mesh>
      
      {/* 画作 */}
      <mesh position={[0, 0, 0.01]}>
        <planeGeometry args={size} />
        <meshStandardMaterial color="#F0F8FF" />
      </mesh>
      
      {/* 装饰角 */}
      {[
        [-size[0]/2 + 0.05, size[1]/2 - 0.05],
        [size[0]/2 - 0.05, size[1]/2 - 0.05],
        [-size[0]/2 + 0.05, -size[1]/2 + 0.05],
        [size[0]/2 - 0.05, -size[1]/2 + 0.05]
      ].map((pos, i) => (
        <mesh key={i} position={[pos[0], pos[1], 0.02]}>
          <boxGeometry args={[0.1, 0.1, 0.02]} />
          <meshStandardMaterial color="#DAA520" metalness={0.8} />
        </mesh>
      ))}
    </group>
  )
}

// 地面装饰组件
const FloorDecoration: React.FC<{ position: [number, number, number] }> = ({ position }) => {
  return (
    <group position={position}>
      {/* 装饰地毯 */}
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[2, 1.5]} />
        <meshStandardMaterial color="#8B0000" roughness={0.8} />
      </mesh>
      
      {/* 地毯边缘装饰 */}
      <mesh position={[0, 0.01, 0]} rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[2.1, 1.6]} />
        <meshStandardMaterial color="#654321" />
      </mesh>
    </group>
  )
}

// 主装饰组件
const Decorations: React.FC = () => {
  return (
    <group>
      {/* 中央雕塑 */}
      <Sculpture position={[0, 0, 0]} type="classical" />
      <Sculpture position={[-5, 0, 3]} type="abstract" />
      <Sculpture position={[5, 0, -3]} type="classical" />
    </group>
  )
}

export default Decorations
